<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
    <title>天气数据分析可视化</title>
    <meta content="Responsive admin theme build on top of Bootstrap 4" name="description">

    <link href="/static/static/css/bootstrap-datepicker.min.css" rel="stylesheet">

    <!-- Morris Chart CSS -->
    <link href="/static/static/css/swiper-bundle.min.css" rel="stylesheet" type="text/css">
    <link href="/static/static/css/bootstrap-datepicker.min.css" rel="stylesheet">

    <!-- DataTables -->
    <link href="/static/static/css/dataTables.bootstrap4.min.css" rel="stylesheet" type="text/css">
    <link href="/static/static/css/buttons.bootstrap4.min.css" rel="stylesheet" type="text/css">

    <!-- Responsive datatable examples -->
    <link href="/static/static/css/responsive.bootstrap4.min.css" rel="stylesheet" type="text/css">

    <link href="/static/static/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="/static/static/css/metismenu.min.css" rel="stylesheet" type="text/css">
    <link href="/static/static/css/icons.css" rel="stylesheet" type="text/css">
    <link href="/static/static/css/style.css" rel="stylesheet" type="text/css">

    <!-- ECharts -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"></script>
</head>

<body>

<div class="header-bg">
    <!-- Navigation Bar -->
    <header id="topnav">
        <div class="topbar-main" style="background-color: #1D84DE">
            <div class="container-fluid">
                <!-- Logo -->
                <div>
                    <a href="" class="logo" style="display: flex;margin-top: 10px">
                        <img src="../static/static/weathericon/方块.png" style="width: 40px; height: 40px;margin-top: 5px;margin-right: 5px">
                        <h3 style="color: white">天气数据分析可视化</h3>
                    </a>
                </div>

                <div class="menu-extras topbar-custom navbar p-0">
                    <!-- Search input -->
                    <div class="search-wrap" id="search-wrap">
                        <div class="search-bar">
                            <input class="search-input" type="search" placeholder="Search">
                            <a href="#" class="close-search toggle-search" data-target="#search-wrap">
                                <i class="mdi mdi-close-circle"></i>
                            </a>
                        </div>
                    </div>

                    <ul class="navbar-right ml-auto list-inline float-right mb-0">
                        <!-- Other navigation links -->
                        <li class="dropdown notification-list list-inline-item d-none d-md-inline-block">
                            <a class="nav-link waves-effect" href="#" id="btn-fullscreen">
                                <i class="fas fa-expand noti-icon" style="color: white"></i>
                            </a>
                        </li>
                        <li class="dropdown notification-list list-inline-item d-none d-md-inline-block">
                            <a class="nav-link waves-effect" href="#" id="btn-fullscreen">
                                <h5 style="color: #fff">
                                    {{ userInfo.username }}
                                </h5>
                            </a>
                        </li>
                        <li class="dropdown notification-list list-inline-item">
                            <!-- User profile dropdown -->
                            <div class="dropdown notification-list nav-pro-img">
                                <a class="dropdown-toggle nav-link arrow-none waves-effect nav-user"
                                   data-toggle="dropdown" href="#" role="button" aria-haspopup="false"
                                   aria-expanded="false">
                                    <img src="/static/static/picture/user-1.jpg" alt="user" class="rounded-circle">
                                </a>
                                <div class="dropdown-menu dropdown-menu-right dropdown-menu-animated profile-dropdown">
                                   
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item " href="/userApp/logOut"><i
                                            class="mdi mdi-power"></i> 退出登录</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item " href="/userApp/userinfo"><i
                                            class="ion-ios-add-circle-outline"></i> 个人信息</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="/userApp/pwdchange"><i
                                            class="ion-ios-trophy"></i> 密码修改</a>
                                </div>
                            </div>
                        </li>
                        <li class="menu-item dropdown notification-list list-inline-item">
                            <!-- Mobile menu toggle -->
                        </li>
                    </ul>
                </div>

                <div class="clearfix"></div>
            </div>
        </div>

        <!-- MENU Start -->
        <div class="navbar-custom">
            <div class="container-fluid">

                <div id="navigation">

                    <!-- Navigation Menu-->
                    <ul class="navigation-menu">

                        <li class="has-submenu">
                            <a href="/userApp/index"><i class="dripicons-home"></i> 首页</a>
                        </li>
                        <li class="has-submenu">
                            <a href="#"><i class="dripicons-view-thumb"></i> 城市数据分析</a>
                            <ul class="submenu">
                                <li><a href="/userApp/CityData">年度分析</a></li>
                                <li><a href="/userApp/CityMonth">月份分析</a></li>
                            </ul>

                        </li>


                        <li class="has-submenu">
                            <a href="#"><i class="dripicons-view-list"></i> 全国数据分析</a>
                            <ul class="submenu">
                                <li><a href="/userApp/monthTempChar">月温度分析</a></li>
                                <li><a href="/userApp/monthAirCha">月份空气质量</a></li>

                            </ul>

                        </li>
                        <li class="has-submenu">
                            <a href="/userApp/screen?user=true"><i class="dripicons-map"></i> 历史数据大屏</a>
                        </li>

                        <li class="has-submenu">
                            <a href="/userApp/chatAI"><i class="dripicons-network-2"></i> 智能问答</a>
                        </li>

                        <li class="has-submenu">
                            <a href="/userApp/weather_deatil_view"><i class="dripicons-view-thumb"></i> 详情信息</a>

                        </li>


                        <li class="has-submenu">
                            <a href="/userApp/weatherforecast/"><i class=" dripicons-star"></i>天气预测</a>
                        </li>
                    </ul>
                    <!-- End navigation menu -->
                </div>
                <!-- end #navigation -->
            </div>
            <!-- end container -->
        </div>
    </header>
</div>

<div class="wrapper" style="padding-top: 30px">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-body">
                        <div class="form-group row">
                            <label for="" class="col-sm-1 col-form-label">月份选择:</label>
                            <div class="col-sm-11">
                                <select onchange="change(event)" name="month_select" id="month_select" class="form-control">
                                    {% for date in dates %}
                                        <option value="{{ date }}">{{ date }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-body">
                        <h4 class="mt-0 header-title">空气质量情况</h4>
                        <div id="mainOne" style="height: 700px; width: 100%"></div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-body">
                        <h4 class="mt-0 header-title">平均空气质量统计</h4>
                        <div id="mainTwo" style="height: 430px; width: 100%"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .swiper {
        width: 100%;
        height: calc(100vh - 131px);
    }

    .swiper-slide {
        height: 100%;
    }

    .wrapper {
        padding-top: 0;
    }

    body {
        padding-bottom: 0;
    }
</style>

<!-- jQuery -->
<script src="/static/static/js/jquery.min.js"></script>
<script src="/static/static/js/bootstrap.bundle.min.js"></script>
<script src="/static/static/js/jquery.slimscroll.js"></script>
<script src="/static/static/js/waves.min.js"></script>

<script src="/static/static/js/apexcharts.min.js"></script>
<script src="/static/static/js/bootstrap-datepicker.min.js"></script>

<!-- Required datatable js -->
<script src="/static/static/js/jquery.dataTables.min.js"></script>
<script src="/static/static/js/dataTables.bootstrap4.min.js"></script>
<!-- Buttons examples -->
<script src="/static/static/js/dataTables.buttons.min.js"></script>
<script src="/static/static/js/buttons.bootstrap4.min.js"></script>
<script src="/static/static/js/jszip.min.js"></script>
<script src="https://themesdesign.in/zegva/layouts/plugins/datatables/pdfmake.min.js"></script>
<script src="https://themesdesign.in/zegva/layouts/plugins/datatables/vfs_fonts.js"></script>
<script src="/static/static/js/buttons.html5.min.js"></script>
<script src="/static/static/js/buttons.print.min.js"></script>
<script src="/static/static/js/buttons.colVis.min.js"></script>
<!-- Responsive examples -->
<script src="/static/static/js/dataTables.responsive.min.js"></script>
<script src="/static/static/js/responsive.bootstrap4.min.js"></script>

<script src="/static/static/js/datatables.init.js"></script>
<script src="/static/static/js/app.js"></script>

<script>
    const defaultMonth = "{{ dates.0 }}";
    let currentMonth = defaultMonth;
    let autoScrollInterval = null; // 存储定时器实例
    let isPaused = false; // 滚动暂停标志
    const chartOne = echarts.init(document.getElementById('mainOne'));
    const chartTwo = echarts.init(document.getElementById('mainTwo'));

    fetchData(defaultMonth);

    async function fetchData(selectedMonth) {
        try {
            const response = await fetch(`/userApp/get_month_air?month=${selectedMonth}`);
            const data = await response.json();

             stopAutoScroll(); // 数据更新前停止旧滚动
            updateCharts(data,selectedMonth);
            startAutoScroll(); // 数据更新后启动新滚动
        } catch (error) {
            console.error("Error fetching data:", error);
        }
    }

    function change(event) {
        const selectedMonth = event.target.value;
        currentMonth = selectedMonth;
        fetchData(selectedMonth);
    }
    function startAutoScroll() {
        stopAutoScroll(); // 确保只有一个定时器运行

        const dataZoomOption = chartOne.getOption().dataZoom[0];
        const dataLength = chartOne.getOption().xAxis[0].data.length;

        // 自动滚动逻辑（优化版）
        autoScrollInterval = setInterval(() => {
            if (isPaused) return;

            const currentOption = chartOne.getOption();
            const startValue = currentOption.dataZoom[0].startValue;
            const visiblePoints = 36; // 每次显示30个数据点

            // 计算新的起始位置
            let newStart = startValue + 1;
            if (newStart >= dataLength - visiblePoints) {
                newStart = 0; // 滚动到末尾后回到开头
            }

            chartOne.dispatchAction({
                type: 'dataZoom',
                startValue: newStart,
                endValue: newStart + visiblePoints,
                dataZoomIndex: 0
            });
        }, 1000); // 滚动间隔改为1秒
    }

    function stopAutoScroll() {
        if (autoScrollInterval) {
            clearInterval(autoScrollInterval);
            autoScrollInterval = null;
        }
    }

    // 鼠标交互事件（优化版）
    chartOne.getZr().on('mouseover', () => {
        isPaused = true;
        stopAutoScroll();
    });

    chartOne.getZr().on('mouseout', () => {
        isPaused = false;
        startAutoScroll();
    });

    // 初始化时启动滚动
    window.addEventListener('load', () => {
        fetchData(defaultCity).then(() => {
            startAutoScroll();
        });
    });

    function updateCharts(data,selectedMonth) {
        // 更新折线图
         const processedTimeData = data.xData.map(str => str.replace(/(\d{4})\//, ''));

    // 更新折线图配置
    const optionOne = {
        title: {
            text: '各城市'+selectedMonth+'月空气质量',
            left: 'center'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                animation: false
            }
        },
        legend: {
            data: ['空气质量良好度', '空气质量恶劣度'],
            left: '60%'
        },
        toolbox: {
            feature: {
                dataZoom: {
                    yAxisIndex: 'none'
                },
                restore: {},
                saveAsImage: {}
            }
        },
        axisPointer: {
            link: [{ xAxisIndex: 'all' }]
        },
        dataZoom: [
            {
                show: true,
                realtime: true,
                start: 0,
                end: 8,
                xAxisIndex: [0, 1]
            },
            {
                type: 'inside',
                realtime: true,
                start: 30,
                end: 70,
                xAxisIndex: [0, 1]
            }
        ],
        grid: [
            {
                left: 60,
                right: 50,
                height: '35%'
            },
            {
                left: 60,
                right: 50,
                top: '55%',
                height: '35%'
            }
        ],
        xAxis: [
            {
                type: 'category',
                boundaryGap: false,
                axisLine: { onZero: true },
                data: processedTimeData
            },
            {
                gridIndex: 1,
                type: 'category',
                boundaryGap: false,
                axisLine: { onZero: true },
                data: processedTimeData,
                position: 'top'
            }
        ],
        yAxis: [
            {
                name: '空气质量良好度',
                type: 'value',
                max: Math.max(...data.y1Data) * 1.1
            },
            {
                gridIndex: 1,
                name: '空气质量恶劣度',
                type: 'value',
                inverse: true
            }
        ],
        series: [
            {
                name: '空气质量良好度',
                type: 'line',
                symbolSize: 6,
                data: data.y1Data.map(v => parseFloat(v)),
                itemStyle: {
                    color: '#5470C6'
                }
            },
            {
                name: '空气质量恶劣度',
                type: 'line',
                xAxisIndex: 1,
                yAxisIndex: 1,
                symbolSize: 6,
                data: data.y2Data.map(v => parseFloat(v)),
                itemStyle: {
                    color: '#EE6666'
                }
            }
        ]
    };

    chartOne.setOption(optionOne);

        // 更新柱状图
        const optionTwo = {
            title: {
                text: '各城市平均空气质量',
                left: 'center'
            },
            tooltip: {
                trigger: 'axis',
            },
             dataZoom: [
                {
                    show: true, 
                    realtime: true,
                    start: 45,
                    end: 50
                }, 
                 {
                     type: 'inside',
                     realtime: true,
                     start: 45,
                     end: 50
                }
             ],
            xAxis: {
                type: 'category',
                data: data.xCityData,
            },
            yAxis: {
                type: 'value',
            },
            series: [
                {
                    name: '平均空气质量',
                    type: 'bar',
                    data: data.yAirData.map((value) => parseFloat(value)),
                    itemStyle: {  // 添加 itemStyle 属性
                        color: '#A8D9C4'  // 设置折线颜色为黄色
                     }
                    
                },
            ],
        };

        chartTwo.setOption(optionTwo);
    }
</script>
</body>

</html>